/* eslint-disable jsx-a11y/alt-text */
import React from 'react';
import Navbar from '../component/Navbar';
import './style/help.css';
const tabList = ["常见问题", "专家回答", "赚钱攻略"]
class Help extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabIndex: 0,
            listIndex: -1,
            type: true,
            list: ["期货怎么交易？", "怎么提现？", "配资是什么？", '怎么提现？', "配资是什么？"]
        }
    }
    goBack = () => {
        this.props.history.goBack();
    }
    //tab切换
    jumpTab(index) {
        console.log(index)
        this.setState({
            tabIndex: index
        })
    }
    //点击list展开
    jumpListItem(index) {
        const { listIndex } = this.state
        if (listIndex === index) index = -1
        this.setState({
            listIndex: index
        })
    }
    render() {
        const { list, listIndex, heavyOrder,tabIndex } = this.state
        return (
            <div className='helpMain'>
                <Navbar onClick={this.goBack} title='帮助中心' ></Navbar>
                <div className='scroll'>
                    <div className="tab">
                        {
                            tabList.map((item, index) => {
                                return <div onClick={() => { this.jumpTab(index) }} key={index} className="tabItem">{item}</div>
                            })
                        }
                    </div>
                    <div className='content'>
                        {
                            list.map((item, index) => {
                                return <div className="listItem" key={index} onClick={() => this.jumpListItem(index)}>
                                    <div className="flex align-center">
                                        <div className="titleName flex-1">{item}----{tabIndex}</div>
                                        {
                                            index === listIndex ? <img className="imgIcon" src={require('./img/help/icon2.png')} /> : <img className="imgIcon" src={require('./img/help/icon1.png')} />
                                        }

                                    </div>
                                    {
                                        index === listIndex ? <div className="answer">答：期货需要在嘉义市健身卡关键是双方都三世纪东方开始事发地时减得撒地方看见爱上。</div> : null
                                    }
                                </div>
                            })
                        }

                    </div>
                </div>
            </div>
        )
    }
}

export default Help;